<%@ page contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <base href="<%=basePath%>">
    <!-- jsp文件头和头部 -->
    <%@ include file="../admin/top.jsp" %>

    <link href="static/bui/css/dpl-min.css" rel="stylesheet">
    <link href="static/bui/css/bui-min.css" rel="stylesheet">
    <script src="static/bui/js/jquery-1.8.1.min.js"></script>
    <script src="static/bui/js/bui-min.js"></script>
    <script src="static/bui/js/layout-min.js"></script>
    <script src="static/bui/js/uploader-min.js"></script>

</head>
<body>
<div class="container-fluid" id="main-container">
    <div id="page-content" class="clearfix">
        <div class="row-fluid">
            <div class="span24">
                <div class="widget-box">

                    <div class="widget-header widget-header-blue widget-header-flat wi1dget-header-large">
                        <h2 class="lighter">导入卡号</h2>
                    </div>
                    <div class="widget-body">

                        <div style="margin-left:20px;margin-right:20px;">
                            <br>
                            <h3>第一步：去<a target="_blank" href="http://ec.iot.10086.cn/security/login.action">移动物联网</a>下载
                            </h3>
                            <hr>
                            <h4>1.1 生成下载任务</h4>
                            <br>
                            <div style="text-align:center">
                                <img src="static/img/step1.1.png" width="800px" height="600px"></img>
                            </div>
                            <br>
                            <br>
                            <h4>1.2 下载卡号文件</h4>
                            <br>
                            <div style="text-align:center">
                                <img src="static/img/step1.2.png" width="800px" height="600px"></img>
                            </div>
                            <br>
                            <br>
                            <br>
                            <h3>第二步：上传文件</h3>
                            <hr>
                            <form id="uploadForm" name="uploadForm" action="tool/upload" method="post"
                                  enctype="multipart/form-data">
                                <select class="chzn-select"
                                        name="appid" id="appid" data-placeholder="请选择平台"
                                        style="vertical-align:top;width: 120px;">
                                    <c:forEach items="${varList}" var="var" varStatus="vs">
                                        <option value="${var.appId}">${var.appId}
                                        </option>
                                    </c:forEach>
                                </select>

                                <input id="fileId" name="fileId" value="" type="hidden">
                            </form>
                            <hr>
                            <div class="widget-main">
                                <div id="J_Uploader"></div>
                            </div><!--/widget-main-->
                            <br>
                            <br>
                            <br>

                        </div><!--/widget-body-->
                    </div>
                </div>

                <!--/#page-content-->
            </div>
            <!--/.fluid-container#main-container-->

            <!--引入属于此页面的js -->
            <script type="text/javascript" src="static/js/myjs/phone.js"></script>
</body>

<script type="text/javascript">
    BUI.use('bui/uploader', function (Uploader) {
        /**
         *  返回数据的格式
         *  默认是 {url : 'url'},否则认为上传失败
         *  可以通过isSuccess 更改判定成功失败的结构
         */
        var uploader = new Uploader.Uploader({
            render: '#J_Uploader',
            url: '<%=basePath%>/tool/uploadFlieJson.do',
            rules: {
                //文的类型
                ext: ['.xls,.xlsx', '文件类型只能为{0}'],
                //上传的最大个数
                max: [1, '文件的最大个数不能超过{0}个'],
                //文件大小的最小值,这个单位是kb
                minSize: [1, '文件的大小不能小于{0}KB'],
                //文件大小的最大值,单位也是kb
                maxSize: [20480, '文件大小不能大于20M']
            },
            //根据业务需求来判断上传是否成功
            isSuccess: function (result) {
                if (result) {
                    var objs = eval("(" + data + ")");
                    if (objs.url) {
                        BUI.Message.Alert("上传成功,文件已保存到目录：" + objs.url);
                        $("#fileId").val(objs.url)
                    } else {
                        BUI.Message.Alert("上传失败" + objs.url);
                    }
                } else {
                    BUI.Message.Alert("上传失败" + result);
                }
            }
        }).render();
    });
</script>

</html>

